<div class="transition duration-300 slide-in-content w-full lg:w-4/5 xl:w-4/5 2xl:w-3/5 m-auto
grid sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-2 2xl:grid-cols-2 gap-6">
    <div class="flex-1 grid p-5 bg-gray-200 dark:bg-gray-700 shadow-xl rounded-lg">
        <div class="flex-1 font-bold text-xl pb-2 text-gray-600 dark:text-gray-400">
            <div class="flex">
                <div data-translate="input_port">Input Port</div>
                <div class='has-tooltip'>
                        <span class='text-xs inline-bloc tooltip rounded shadow-lg p-1 bg-gray-100 dark:bg-gray-600 text-gray-600 dark:text-gray-400 -mt-8'>
                            <div data-translate="confirm">For lighting LEDs with your keyboard, set your piano port as an active input.</div>
                            <br><div data-translate="set_your_synthesia">Set your Synthesia's port for learning mode.</div>
                        </span>
                    <svg xmlns="http://www.w3.org/2000/svg" class="ml-1 h-4 w-4 mt-2" fill="none" viewBox="0 0 24 24"
                         stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                </div>
            </div>

        </div>

        <div class="flex flex-wrap -mx-3">
            <div class="w-full md:w-2/5 px-3 md:mb-0">
                <label class="block uppercase tracking-wide text-xs font-bold mb-2 text-gray-600 dark:text-gray-400" data-translate="active">
                    Active
                </label>
                <div class="relative">
                    <select id="active_input" class="h-10 block appearance-none w-full bg-gray-100 dark:bg-gray-600
        py-2 px-2 pr-8 rounded-2xl leading-tight focus:outline-none focus:bg-white focus:border-gray-500">
                    </select>
                    <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700 dark:text-gray-200">
                        <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                            <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/>
                        </svg>
                    </div>
                </div>
            </div>

            <div class="flex justify-center w-full h-10 md:w-1/5 px-3 mb-2 mt-4 md:mb-0">
                <button id="switch_ports"
                        class="mt-2 bg-gray-100 dark:bg-gray-600 font-bold h-10 py-2 px-2 rounded-2xl inline-flex items-center">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 hidden md:block lg:block xl:block 2xl:block"
                         fill="none"
                         viewBox="0 0 24 24"
                         stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"/>
                    </svg>
                    <svg xmlns="http://www.w3.org/2000/svg"
                         class="h-6 w-6 xs:block sm:block md:hidden lg:hidden xl:hidden 2xl:hidden" fill="none"
                         viewBox="0 0 24 24"
                         stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"/>
                    </svg>
                    <span data-translate="switch">Switch</span>
                </button>
            </div>


            <div class="w-full md:w-2/5 px-3">
                <label class="block uppercase tracking-wide text-xs font-bold mb-2 text-gray-600 dark:text-gray-400" data-translate="secondary">
                    Secondary
                </label>
                <div class="relative">
                    <select id="secondary_input" class="h-10 block appearance-none w-full bg-gray-100 dark:bg-gray-600
        py-2 px-2 pr-8 rounded-2xl leading-tight focus:outline-none focus:bg-white focus:border-gray-500">
                    </select>
                    <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700 dark:text-gray-200">
                        <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                            <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/>
                        </svg>
                    </div>
                </div>
            </div>
        </div>


    </div>

    <div class="flex-1 grid p-5 bg-gray-200 dark:bg-gray-700 shadow-xl rounded-lg">
        <div class="flex-1 font-bold text-xl pb-2 text-gray-600 dark:text-gray-400">
            <div class="flex" data-translate="playback_port">
                Playback Port
                <div class='has-tooltip'>
                        <span class='text-xs inline-block tooltip rounded shadow-lg p-1
                        bg-gray-100 dark:bg-gray-600 text-gray-600 dark:text-gray-400 -mt-8'
                        data-translate="used_for_sound">
                            Used for sound when playing a midi file.
                        </span>
                    <svg xmlns="http://www.w3.org/2000/svg" class="ml-1 h-4 w-4 mt-2" fill="none" viewBox="0 0 24 24"
                         stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                </div>
            </div>
        </div>
        <div class="w-full px-3 md:mb-0">
            <label class="block uppercase tracking-wide text-xs font-bold mb-2 text-gray-600 dark:text-gray-400" data-translate="active">
                Active
            </label>
            <div class="relative">
                <select id="playback_input" class="h-10 block appearance-none w-full bg-gray-100 dark:bg-gray-600
        py-2 px-2 pr-8 rounded-2xl leading-tight focus:outline-none focus:bg-white focus:border-gray-500">
                </select>
                <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700 dark:text-gray-200">
                    <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                        <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/>
                    </svg>
                </div>
            </div>
        </div>
    </div>

    <div class="flex-1 grid p-5 bg-gray-200 dark:bg-gray-700 shadow-xl rounded-lg">
        <div class="flex">
            <div class="font-bold text-xl pb-2 text-gray-600 dark:text-gray-400" data-translate="list_of_ports">
                List of ports and connections
            </div>
            <svg id="refresh-ports" onclick="get_ports()" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="ml-2 w-6 h-6 mb-4 cursor-pointer">
                <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"></path>
            </svg>
        </div>
        <textarea id="connect_all_textarea"
                  class="w-full px-3 py-2 bg-gray-100 dark:bg-gray-600 rounded-lg focus:outline-none"
                  rows="16"></textarea>

        <div class="grid grid-cols-2 sm:grid-cols-1 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-3">
            <div class="p-2">
                <label class="block uppercase tracking-wide text-xs font-bold mt-2 text-gray-600 dark:text-gray-400" data-translate="connect_ports">
                    Connect ports
                </label>
                <button onclick="this.classList.add('hidden');this.nextElementSibling.classList.remove('hidden')"
                        class="w-full h-10 outline-none mb-2 bg-gray-100 dark:bg-gray-600 font-bold py-2 px-2
                        rounded-2xl inline-flex items-center">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-full justify-items-center" fill="none"
                         viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0
                              005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"/>
                    </svg>
                </button>
                <button onclick="change_setting('connect_ports', '0');temporary_disable_button(this, 5000);"
                        class="w-full h-10 outline-none mb-2 bg-gray-100 dark:bg-gray-600 font-bold py-2 px-2
                        rounded-2xl inline-flex items-center hidden">
                    <span class="w-full uppercase text-xs" data-translate="confirm">Confirm</span></button>
            </div>

            <div class="p-2">
                <label class="block uppercase tracking-wide text-xs font-bold mt-2 text-gray-600 dark:text-gray-400" data-translate="disconnect_ports">
                    Disconnect ports
                </label>
                <button onclick="this.classList.add('hidden');this.nextElementSibling.classList.remove('hidden')"
                        class="w-full h-10 outline-none mb-2 bg-gray-100 dark:bg-gray-600 font-bold py-2 px-2
                        rounded-2xl inline-flex items-center">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-full justify-items-center" fill="none"
                         viewBox="0 0 24 24"
                         stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M14.121 14.121L19 19m-7-7l7-7m-7 7l-2.879 2.879M12 12L9.121 9.121m0 5.758a3 3 0
                              10-4.243 4.243 3 3 0 004.243-4.243zm0-5.758a3 3 0 10-4.243-4.243 3 3 0 004.243 4.243z"/>
                    </svg>
                </button>
                <button onclick="change_setting('disconnect_ports', '0');temporary_disable_button(this, 1500);"
                        class="w-full h-10 outline-none mb-2 bg-gray-100 dark:bg-gray-600 font-bold py-2 px-2
                        rounded-2xl inline-flex items-center hidden">
                    <span class="w-full uppercase text-xs" data-translate="confirm">Confirm</span></button>
            </div>

            <div class="p-2">
                <label class="flex uppercase tracking-wide text-xs font-bold mt-2 text-gray-600 dark:text-gray-400" data-translate="restart_rtp">
                    Restart RTP MIDI service
                </label>
                <button onclick="this.classList.add('hidden');this.nextElementSibling.classList.remove('hidden')"
                        class="w-full h-10 outline-none mb-2 bg-gray-100 dark:bg-gray-600 font-bold py-2 px-2
                        rounded-2xl inline-flex items-center">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-full justify-items-center" fill="none"
                         viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
                    </svg>
                </button>
                <button onclick="change_setting('restart_rtp', '0');temporary_disable_button(this, 1500);"
                        class="w-full h-10 outline-none mb-2 bg-gray-100 dark:bg-gray-600 font-bold h-6 py-2 px-2
                        rounded-2xl inline-flex items-center hidden">
                    <span class="w-full uppercase text-xs" data-translate="confirm">Confirm</span></button>
            </div>

        </div>
    </div>


    <div class="flex-1 grid p-5 bg-gray-200 dark:bg-gray-700 shadow-xl rounded-lg">
        <div class="flex-1 font-bold text-xl pb-2 text-gray-600 dark:text-gray-400" data-translate="midi_events">MIDI events</div>

        <div class="flex items-center mb-4">
            <input onclick="change_setting('show_midi_events', this.checked)" id="midi_events_checkbox" type="checkbox" value=""
                   class="w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
            <label for="default-checkbox" class="pl-2 block uppercase
            tracking-wide text-xs font-bold mt-2 text-gray-600 dark:text-gray-400"
            data-translate="show_midi_events">
                Show midi events (might degrade performance)
            </label>
        </div>

        <textarea readonly id="midi_events_textarea"
                  class="w-full px-3 py-2 bg-gray-100 dark:bg-gray-600 rounded-lg focus:outline-none"
                  rows="20"></textarea>
    </div>
</div>

